<template>
	<su-fixed bottom placeholder bg="bg-white">
		<view class="ui-tabbar-box">
			<view class="ui-tabbar ss-flex ss-col-center ss-row-between">
				<!-- <view
          v-if="collectIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="onFavorite"
        >
          <block v-if="modelValue.favorite">
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_1.gif')"
              mode="aspectFit"
            ></image>
            <view class="item-title">已收藏</view>
          </block>
          <block v-else>
            <image
              class="item-icon"
              :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/collect_0.png')"
              mode="aspectFit"
            ></image>
            <view class="item-title">收藏</view>
          </block>
        </view> -->
				<view class="ss-flex ss-col-center ss-row-between">
					<!-- @tap="onChat" -->
					<view v-if="serviceIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
						@tap="oHome">
						<image src="/static/icon/home.png" style="width: 32rpx; height: 32rpx;" class="img-icon">
						</image>
						<!-- <image
				class="item-icon"
				:src="sheep.$url.static('/assets/addons/shopro/uniapp/tools/home.png')"
				mode="aspectFit"
			  ></image> -->
						<view class="item-title">首页</view>
					</view>
					<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
						@tap="emits('hb')">
						<i class="iconfontmm icon-fenxiang"></i>
						<!-- <image
				class="item-icon"
				:src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/share.png')"
				mode="aspectFit"
			  ></image> -->
						<view class="item-title">分享</view>
					</view>
					<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center">
						<image src="/static/icon/aixin2.png" style="width: 32rpx; height: 32rpx;" class="img-icon">
						</image>
						<view class="item-title">{{ modelValue.like }}</view>
					</view>
					<view v-if="shareIcon" class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center">
						<image src="/static/icon/yanhua2.png" style="width: 32rpx; height: 32rpx;" class="img-icon">
						</image>
						<view class="item-title">{{ modelValue.views }}</view>
					</view>
				</view>
				<slot></slot>
			</view>
		</view>
	</su-fixed>
</template>

<script setup>
	/**
	 *
	 * 底部导航
	 *
	 * @property {String} bg 			 			- 背景颜色Class
	 * @property {String} ui 			 			- 自定义样式Class
	 * @property {Boolean} noFixed 		 			- 是否定位
	 * @property {Boolean} topRadius 		 		- 上圆角
	 *
	 *
	 */

	import {
		computed,
		reactive
	} from 'vue';
	import sheep from '@/sheep';
	import {
		showShareModal
	} from '@/sheep/hooks/useModal';

	// 数据
	const state = reactive({});
	const emits = defineEmits('hb')
	// 接收参数
	const props = defineProps({
		modelValue: {
			type: Object,
			default () {},
		},
		bg: {
			type: String,
			default: 'bg-white',
		},
		bgStyles: {
			type: Object,
			default () {},
		},
		ui: {
			type: String,
			default: '',
		},

		noFixed: {
			type: Boolean,
			default: false,
		},
		topRadius: {
			type: Number,
			default: 0,
		},
		collectIcon: {
			type: Boolean,
			default: true,
		},
		serviceIcon: {
			type: Boolean,
			default: true,
		},
		shareIcon: {
			type: Boolean,
			default: true,
		},
	});
	const elStyles = computed(() => {
		return {
			'border-top-left-radius': props.topRadius + 'rpx',
			'border-top-right-radius': props.topRadius + 'rpx',
			overflow: 'hidden',
		};
	});

	const tabbarheight = (e) => {
		uni.setStorageSync('tabbar', e);
	};
	async function onFavorite() {
		const {
			code
		} = await sheep.$api.user.favorite.do(props.modelValue.id);
		if (code === 1) {
			if (props.modelValue.favorite) {
				props.modelValue.favorite = 0;
			} else {
				props.modelValue.favorite = 1;
			}
		}
	}

	const oHome = () => {
		sheep.$router.go('/pages/index/index');
	};
</script>

<style lang="scss" scoped>
	.ui-tabbar-box {
		box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
	}

	.ui-tabbar {
		display: flex;
		height: 50px;
		background: #fff;

		.detail-tabbar-item {
			width: 90rpx;

			.iconfontmm {
				font-size: 34rpx;
				font-weight: 600;
			}

			.item-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.item-title {
				font-size: 20rpx;
				font-weight: 500;
				line-height: 20rpx;
				margin-top: 12rpx;
				color: #000;
				font-weight: bold;
			}
		}
	}
</style>